<template>
  <div class="container">
    <!--    <div v-for="item in comments" >hh{{item.content}}</div>-->
    <div style="height: 50px">
      <!--        v-if="item.reply.length > 0"
                         @click="showCommentInput(item)"-->
      <div
        class="write-reply"
        style="height: 100%; position: absolute; top: 10px; right: 15px"
        @click="showCommentInput1()"
      >
        <i class="el-icon-edit"></i>
        <span class="add-comment">添加新评论</span>
      </div>
    </div>

    <transition name="fade">
      <div class="input-wrapper" v-if="showItem == true">
        <el-input
          class="gray-bg-input"
          v-model="inputComment"
          type="textarea"
          :rows="3"
          autofocus
          placeholder="写下你的评论"
        >
        </el-input>
        <div class="btn-control" style="padding: 30px">
          <el-button
            style="position: absolute; right: 170px"
            class="cancel"
            type="primary"
            round
            @click="cancel"
            >取消</el-button
          >
          <el-button
            style="position: absolute; right: 70px"
            class="btn"
            type="success"
            round
            @click="commitComment2"
            >确定</el-button
          >
        </div>
      </div>
    </transition>

    <div class="comment" v-for="item in comments[0]" :key="item">
      <div v-if="item.parentId == -1">
        <div class="info">
          <img class="avatar" :src="item.iconurl" width="36" height="36" />
          <div class="right">
            <div class="name" :content="item.username">{{ item.username }}</div>
            <div class="date" :content="item.publishDate">
              {{ item.publishDate }}
            </div>
          </div>
        </div>
        <div class="content" :content="item.content">{{ item.content }}</div>
        <div class="control">
          <span
            class="like"
            :class="{ active: item.isLike }"
            @click="likeClick(item)"
          >
            <i class="iconfont icon-like"></i>
            <span class="like-num">{{
              item.likeNum > 0 ? item.likeNum + "⼈赞" : "赞"
            }}</span>
          </span>
          <span class="comment-reply" @click="showInput(item)">
            <i class="iconfont icon-comment"></i>
            <span>回复</span>
          </span>
        </div>
        <div style="padding-top: 20px">
          <transition name="fade">
            <div class="input-wrapper" v-if="showItemId === item.cid">
              <el-input
                class="gray-bg-input"
                v-model="inputComment"
                type="textarea"
                :rows="3"
                autofocus
                placeholder="写下你的评论"
              >
              </el-input>
              <div class="btn-control" style="padding: 30px">
                <el-button
                  style="position: absolute; right: 170px"
                  class="cancel"
                  type="primary"
                  round
                  @click="cancel"
                  >取消</el-button
                >
                <el-button
                  style="position: absolute; right: 70px"
                  class="btn"
                  type="success"
                  round
                  @click="commitComment(item)"
                  >确定</el-button
                >
              </div>
            </div>
          </transition>
        </div>
    </div>

      <div
        v-for="reply in item.reply"
        :key="reply"
      >
        <div class="reply">
          <div class="item" :key="reply">
            <div class="reply-content">
              <span class="from-name">{{ reply.username }}</span
              ><span>: </span>
              <span class="to-name">@{{ reply.puname }}</span>
              <span>{{ reply.content }}</span>
            </div>
            <div class="reply-bottom">
              <span>{{ reply.publishDate }}</span>
              <span class="reply-text" @click="showCommentInput(item, reply)">
                <i class="iconfont icon-comment"></i>
                <span>回复</span>
              </span>
            </div>
            <div style="padding-top: 20px">
          <transition name="fade">
            <div class="input-wrapper" v-if="showItemReplyId===reply.cid">
              <el-input
                class="gray-bg-input"
                v-model="inputComment"
                type="textarea"
                :rows="3"
                autofocus
                placeholder="写下你的评论"
              >
              </el-input>
              <div class="btn-control" style="padding: 30px">
                <el-button
                  style="position: absolute; right: 170px"
                  class="cancel"
                  type="primary"
                  round
                  @click="cancel"
                  >取消</el-button
                >
                <el-button
                  style="position: absolute; right: 70px"
                  class="btn"
                  type="success"
                  round
                  @click="commitComment1(item, reply)"
                  >确定</el-button
                >
              </div>
            </div>
          </transition>
        </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import ElementUI from 'element-ui'
const axios = require("axios");

export default {
  name: "comment",
  props: {
    comments: {
      type: Array,
      required: true,
    },
  },
  inject:['reload'],
  data() {
    return {
      inputComment: "",
      showItemId: "",
      showItemReplyId:"",
      fromName: "",
      date: "",
      content: "",
      aid:this.$route.query.aid,
      iconurl: "",
      comments: [],
      showItem: false,
      username: "",
    };
  },
  created() {
    console.log(this.comments);
    const _this = this;
    axios.get("/getComments", { params: { aid: this.aid } }).then((res) => {
      (_this.comments.push(res.data.data)), console.log(this.comments);
      //console.log('传到页面的数据为' + this.content)
    });
  },
  components: {},
  computed: {},
  methods: {
    /**
     * 点赞
     */
    likeClick(item) {
      if (item.isLike === null) {
        Vue.$set(item, "isLike", true);
        item.likeNum++;
      } else {
        if (item.isLike) {
          item.likeNum--;
        } else {
          item.likeNum++;
        }
        item.isLike = !item.isLike;
      }
    },
    /**
     * 点击取消按钮
     */
    cancel() {
      this.showItemId = "";
      this.showItemReplyId = "";
      this.showItem = false;
      this.show = false;
    },
    /**
     * 提交评论
     */
    commitComment(item) {
      console.log(this.inputComment);
      this.showItem = false;
       let url_data=this.$qs.stringify({				//使用qs编译转换参数 ，将参数赋值与url_data
            //qs编译转换的参数， user_id为接口关键字，7为参数值
            //  传递测试数据
                  aid: this.aid,
                  uid: sessionStorage.getItem("uid") ,
                  content: this.inputComment,
                  puid:item.uid,
                  parentId:item.cid
          });
      axios.post('/comment',url_data
        ).then((res) => {
            if (res.data.code === 200) 
             {
                 this.$message.success("回复成功！");
                 this.reload();
             }
           
          else 
             {
                 this.$message.error("回复失败！");
                 this.reload();
             }
        });
    },

    commitComment1(item,reply) {
      console.log(this.inputComment);
      this.showItem = false;
      let url_data=this.$qs.stringify({				//使用qs编译转换参数 ，将参数赋值与url_data
            //qs编译转换的参数， user_id为接口关键字，7为参数值
            //  传递测试数据
               aid: this.aid,
                  uid: sessionStorage.getItem("uid") ,
                  content: this.inputComment,
                  puid:reply.uid,
                 parentId:item.cid
          });
      axios.post('/comment',url_data
        ).then((res) => {
               if (res.data.code === 200) 
             {
                 this.$message.success("回复成功！");
                 this.reload();
             }
           
          else 
             {
                 this.$message.error("回复失败！");
                 this.reload();
             }
        });
    },
    commitComment2() {
      console.log(this.inputComment);
      this.showItem = false;
      let url_data=this.$qs.stringify({				//使用qs编译转换参数 ，将参数赋值与url_data
            //qs编译转换的参数， user_id为接口关键字，7为参数值
            //  传递测试数据
                aid: this.aid,
                  uid: sessionStorage.getItem("uid") ,
                  content: this.inputComment,
                 parentId:-1
          });
      axios.post('/comment',url_data
        ).then((res) => {
             if (res.data.code === 200) 
             {
                 this.$message.success("回复成功！");
                 this.reload();
             }
           
          else 
             {
                 this.$message.error("回复失败！");
                 this.reload();
             }
        });
    },
    /**
     * 点击评论按钮显示输⼊框
     * item: 当前⼤评论
     * reply: 当前回复的评论
     */
    showInput(item) {
      this.showItemId = item.cid;
      this.showItemReplyId = '';
    },
    showCommentInput(item, reply) {
      this.showItemReplyId = reply.cid;
      this.showItemId = '';
    },

    showCommentInput1() {
      this.showItem = true;
    },
    showCommentInput2() {
      this.show = true;
    },
  },
};
</script>
<style scoped>
.container {
  padding: 0 10px;
  box-sizing: border-box;
}
.container .comment {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-bottom: 1px solid #f2f6fc;
}
.container .comment .info {
  display: flex;
  align-items: center;
}
.container .comment .info .avatar {
  border-radius: 50%;
}
.container .comment .info .right {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.container .comment .info .right .name {
  font-size: 16px;
  color: #303133;
  margin-bottom: 5px;
  font-weight: 500;
}
.container .comment .info .right .date {
  font-size: 12px;
  color: #909399;
}
.container .comment .content {
  font-size: 16px;
  color: #303133;
  line-height: 20px;
  padding: 10px 0;
}
.container .comment .control {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #909399;
}
.container .comment .control .like {
  display: flex;
  align-items: center;
  margin-right: 20px;
  cursor: pointer;
}
.container .comment .control .like.active,
.container .comment .control .like:hover {
  color: #409eff;
}
.container .comment .control .like .iconfont {
  font-size: 14px;
  margin-right: 5px;
}
.container .comment .control .comment-reply {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.container .comment .control .comment-reply:hover {
  color: #333;
}
.container .comment .control .comment-reply .iconfont {
  font-size: 16px;
  margin-right: 5px;
}
.container .comment .reply {
  margin: 10px 0;
  border-left: 2px solid #dcdfe6;
}
.container .comment .reply .item {
  margin: 0 10px;
  padding: 10px 0;
  border-bottom: 1px dashed #ebeef5;
}
.container .comment .reply .item .reply-content {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #303133;
}
.container .comment .reply .item .reply-content .from-name {
  color: #409eff;
}
.container .comment .reply .item .reply-content .to-name {
  color: #409eff;
  margin-left: 5px;
  margin-right: 5px;
}
.container .comment .reply .item .reply-bottom {
  display: flex;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  color: #909399;
}
.container .comment .reply .item .reply-bottom .reply-text {
  display: flex;
  align-items: center;
  margin-left: 10px;
  cursor: pointer;
}
.container .comment .reply .item .reply-bottom .reply-text:hover {
  color: #333;
}
.container .comment .reply .item .reply-bottom .reply-text .icon-comment {
  margin-right: 5px;
}
.container .comment .reply .write-reply {
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #909399;
  padding: 20px;
  cursor: pointer;
}
.container .comment .reply .write-reply:hover {
  color: #303133;
}
.container .comment .reply .write-reply .el-icon-edit {
  margin-right: 5px;
}
.container .comment .reply .fade-enter-active,
.container .comment .reply fade-leave-active {
  transition: opacity 0.5s;
}
.container .comment .reply .fade-enter,
.container .comment .reply .fade-leave-to {
  opacity: 0;
}
.container .comment .reply .input-wrapper {
  padding: 10px;
}
.container .comment .reply .input-wrapper .gray-bg-input,
.container .comment .reply .input-wrapper .el-input__inner {
  /*background-color: #67C23A;*/
}
.container .comment .reply .input-wrapper .btn-control {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 10px;
}
.container .comment .reply .input-wrapper .btn-control .cancel {
  font-size: 16px;
  color: #606266;
  margin-right: 20px;
  cursor: pointer;
}
.container .comment .reply .input-wrapper .btn-control .cancel:hover {
  color: #333;
}
.container .comment .reply .input-wrapper .btn-control .confirm {
  font-size: 16px;
}
</style>
